<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Spread Attribute</title>
	<script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">
		var FullInput = React.createClass({
			render:function() {
				return (
					<div>
						<label>{this.props.title}</label>
						<input type={this.props.type} placeholder={this.props.placeholder} />
					</div>
				);
			} 
		});

		/*
		展开属性 Spread Attribute：
		可以把组件需要的props打包成一个js对象，在组件上以 {...props} 语法形式应用,相比在组件上标记多个prop，展开属性更简洁,易维护
		
		**/
		var myprops = { 
			type: "number", 
			placeholder: "please input number",
			title: "title"
		 };
		ReactDOM.render(
			<FullInput {...myprops} />,
			document.getElementById("example")
		);

	</script>
</body>
</html>